
<template>
  <div>
    <el-row>
      <el-col :span="24" style="height: 80vh">
        <CesiumMap ref="cesiumMap" :tileSet="tileSet"></CesiumMap>
      </el-col>
    </el-row>

  </div>
</template>
    
  
<script>
import CesiumMap from "../cesiumMap/index.vue";
let viewer = null;

export default {
  components: { CesiumMap },
  data() {
    return {
      tileSet: {

      }
    }
  },
  methods: {
    loadGeojson: function () {
      const promise = viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../public/data/geo_china.json'));//默认是黄色
      promise.then(function (dataSource) {
        const entities = dataSource.entities.values;
        for (let i = 0; i < entities.length; i++) {
          const entity = entities[i];
          entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.1);
          entity.polygon.outlineColor = Cesium.Color.YELLOW;
          entity.beOf = "中国地图";
        }
      })
    },
   
  },
  setup() {
    return {
    };
  },

  mounted() {
    viewer = this.$refs.cesiumMap.viewer;
    // viewer.imageryLayers.removeAll();
    this.loadGeojson();
  },
};
</script>
  
<style scoped></style>
  